<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>video 的常用标签属性介绍</title>
</head>

<body>
  <h2>video</h2>
  <!-- 
    video 标签属性：
    src 用于指定视频地址（注：可以通过js动态修改src的值达到切换视频的效果
    controls 控制是否显示视频播放控件以及视频信息，比如：视频时长、当前播放节点、进度条等
    controlslist="nodownload" 可以让视频控件上自带的下载控件隐藏
    autoplay 控制视频是否自动播放（注：移动端不静音的视频不能自动播放）
    muted 控制视频是否默认禁音（移动端视频自动播放的前提需要视频禁音才行）
    loop 控制视频是否循环播放
    preload 控制视频是否预加载
    volume 控制视频初始音量值0~1之间（注：该属性直接给标签添加可能会无效需要通过js获取元素再给volume赋值
           示例：const video = document.getElementById('video')
                video.volume = 0.1
    currentTime 属性用于读写当前视频的进度条默认为0、单位为秒（注：若需要修改进度条初始位置也需要通过js给属性赋值的方式
                示例：video.currentTime = 60
   -->
  <!-- 基础用法 -->
  <video id="video" src="./demo.mp4" width="400" height="250" controls controlslist="nodownload"></video>
  <br>
  <hr>
  <br>
  <!-- 贴图(贴封面) -->
  <video src="./demo.mp4" width="400" height="250" controls poster="./demo.webp"></video>
  <br>
  <hr>
  <br>
  <!-- 添加视频备用地址 -->
  <video id="_source" width="400" height="250" controls autoplay controlslist="nodownload">
    <!-- 第一个为首选视频地址，默认会加载这个视频 -->
    <source src="./demo.mp4" type="video/mp4">
    <!-- 如果上面的视频地址都加载失败了就会加载下面这个视频地址 -->
    <source src="./demo2.mp4" type="video/mp4">
  </video>
  <script>
    // 设置视频音量和进度条
    // const video = document.getElementById('video')
    // video.volume = 0.1
    // video.currentTime = 60
    // 添加视频备用地址后通过获取视频标签判断当前播放的视频的路径从而判断哪些视频加载失败了：
    const _source = document.getElementById('_source')
    _source.volume = 0.1
    _source.currentTime = 10
    // 通过 currentSrc 可获取到当前视频成功的视频路径，通过它也可以判断在它之前的路径都是加载失败的
    setTimeout(() => {
      console.log('当前播放的视频地址：', _source.currentSrc)
    }, 1000);
  </script>
</body>

</html>